<template>
    <div>
        
        <transition name="fadein" mode="" >
            <p v-if='isShow'  ref="test1" key="test1">我进场</p>
            <p v-else ref="test2" key="test2">我离开</p>
        </transition>
        <button @click="showAnima">点击切换进出场</button>
    </div>
</template>

<script>
    export default {
        name: "demo",
        data() {
            return {
               isShow : false 
            }
        },
        methods : {
            showAnima(){
                var _this = this;
                setTimeout(function(){
                    _this.isShow=!_this.isShow
                },100)
            },
        }
        
    }
</script>

<style scoped>
    p{height: 20px;background-color: #ddd}
    .fadein-enter{
        background-color: red;  
    }
    .fadein-enter-active {
        transition: all 2s linear;
    }
    .fadein-enter-to{
        background-color: green;
    }
    .fadein-leave{
        background-color: yellow;
    }
    .fadein-leave-active {
        transition: all 2s linear;
    }
    .fadein-leave-to{
        background-color: blue;
    }
</style>
